<template>
  <div class="imgBox">
  	
   		<div class="box1">
   			<input type="file"name='photo' multiple value="" accept="image/*" :id="inputId"  ref="inputer" capture="video"  @change='handleFileChange'>
   			<label :for="inputId"></label>
   			<b class="fa fa-plus"></b>
   			<img :title="imgName" :src="dataUrl"/>
   		</div>
     <!--<input accept="image/*,video/*;" .../>-->
     <!--input原本可以指定接收的文件格式，会在选择框出来的时候默认无法选择非指定格式的文件-->
  </div>
</template>

<script>

import $ from 'jquery'
export default {
  components: {
  
  },
  data () {
    return {

		dataUrl:'',
		imgName:'',
		inputId:''
    }
  },
  methods: {
  	
//	当页面中需要多个 inputer 时，同一个input的id会冲突，所以不指定的情况下需要个唯一id：
  	
  	 gengerateID () {
        let nonstr = Math.random().toString(36).substring(3, 8);
        if (!document.getElementById(nonstr)) {
            return nonstr
        } else {
            return this.gengerateID()
        }
    },
  	
  	 imgPreview (file) {
            let self = this;
            // 看支持不支持FileReader
        
            if (!file || !window.FileReader) return;
    
            if (/^image/.test(file.type)) {
                // 创建一个reader
                var reader = new FileReader();
                // 将图片将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onloadend = function () {
                    self.dataUrl = this.result;
                }
            }
        },

//上传图片

handleFileChange:function(e){

       let inputDOM = this.$refs.inputer;
            // 通过DOM取文件数据
            this.file    = inputDOM.files[0];
            this.errText = '';
//  		console.log(this.file)
            let size = Math.floor(this.file.size / 1024);
//          if (size > 2) {
                // 这里可以加个文件大小控制
//              return false
//          }
    
            // 触发这个组件对象的input事件
            this.$emit('input', this.file);
            
            // 这里就可以获取到文件的名字了
            this.fileName = this.file.name;
            
//          console.log(this.fileName)
            this.imgName = this.fileName;
            // 这里加个回调也是可以的
            this.onChange && this.onChange(this.file, inputDOM.value);
			this.imgPreview(this.file);
      
} ,

},
mounted () {
    this.inputId = this.id || this.gengerateID();
}    
}
</script>

<style scoped> 

.imgBox{
	display: inline-block;
}
.logo {
  width: 100px;
  height: 100px
}
.box1 {
	
	text-align: center;
    position: relative;
    width: 100px;
	height: 100px;
	border: solid 5px #eee;
}
.box1 input {
    position: absolute;
    left: -9999px;
}    
/* 使label充满整个box*/
.box1 label {
	
	cursor: pointer;
	
    position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    z-index: 10; /* 这个z-index之后说到*/
}
.box1 b {
	color: #EEEEEE;
	font-size: 80px;
	margin-top: 10px;
}
.box1 img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;left: 0;right: 0;bottom: 0;
}
</style>